<template>
  <div class="seller-card-modern">
    <!-- 商家头部信息 -->
    <div class="seller-header">
      <div class="seller-image-container">
        <img :src="sjtp + sjInfo.sjtp" alt="商家图片" class="seller-image" v-if="sjInfo.sjtp">
        <div class="placeholder-image" v-else>
          <el-icon><Shop /></el-icon>
        </div>
      </div>
      <div class="seller-info">
        <div class="seller-name-section">
          <h3 class="seller-name">{{ sjInfo.name }}</h3>
          <el-tag v-if="sjInfo.status === '营业中'" type="success" size="small">营业中</el-tag>
          <el-tag v-else type="danger" size="small">休息中</el-tag>
        </div>

        <div class="seller-metrics">
          <div class="metric-item">
            <el-icon><TrendCharts /></el-icon>
            <span>月售 {{ sjInfo.xse || 2000 }}+</span>
          </div>
          <div class="metric-item">
            <el-icon><Timer /></el-icon>
            <span>{{ sjInfo.psfsj || '40' }}分钟</span>
          </div>
          <div class="metric-item">
            <el-icon><Location /></el-icon>
            <span>{{ sjInfo.address }}</span>
          </div>
        </div>

        <div class="seller-pricing">
          <span>起送 ¥{{ sjInfo.qsf }}</span>
          <span>配送费 ¥{{ sjInfo.psf }}</span>
          <span v-if="sjInfo.mfpf > 0">满{{ sjInfo.mfpf }}免配送费</span>
        </div>
      </div>
    </div>

    <!-- 菜品轮播 -->
    <div class="cpList-container" v-if="cpList && cpList.length > 0">
      <div class="carousel-wrapper">
        <el-carousel
            trigger="click"
            height="200px"
            arrow="hover"
            indicator-position="none"
            :autoplay="false"
            :loop="false">
          <el-carousel-item v-for="(group, groupIndex) in dishGroups" :key="groupIndex">
            <div class="dish-grid">
              <dish-item
                  v-for="(dish, index) in group"
                  :key="index"
                  :dish="dish"
                  class="dish-item-carousel" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="empty-dish-message" v-else>
      <el-icon><FolderOpened /></el-icon>
      <p>暂无菜品信息</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, defineProps} from 'vue'
import DishItem from './DishItem.vue'
import {FolderOpened, Location, Shop, Timer, TrendCharts} from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  sjInfo: {
    type: Object as () => Record<string, any>,
    required: true
  },
  cpList: {
    type: Array as () => any[],
    required: true
  }
})
const sjtp = "http://localhost:8088/team/upload/"
const groups = [];
// 计算属性：将菜品列表按每组4个拆分
const dishGroups = computed(() => {
  groups.length = 0;
  for (let i = 0; i < props.cpList?.length; i += 4) {
    groups.push(props.cpList?.slice(i, i + 4));
  }
  return groups;
});
</script>

<style scoped>
.seller-card-modern {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.seller-card-modern:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.seller-header {
  padding: 20px;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.seller-image-container {
  flex-shrink: 0;
}

.seller-image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.placeholder-image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.seller-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.seller-name-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: #333;
}

.seller-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  color: #666;
}

.seller-pricing {
  display: flex;
  gap: 15px;
  font-size: 0.9rem;
  color: #ff6b35;
  font-weight: 500;
}

.cpList-container {
  padding: 15px;
  flex: 1;
}

.carousel-wrapper {
  height: 100%;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  height: 100%;
}

.dish-item-carousel {
  height: 100%;
}

.empty-dish-message {
  text-align: center;
  padding: 30px;
  color: #999;
}

.empty-dish-message i {
  font-size: 2rem;
  margin-bottom: 10px;
}
</style>
